<script setup lang="ts">
import { computed } from "vue";
import {
  Volume,
  VolumeMountStatus
} from "@/views/domain/kubeHud/api/k8s/types";
import { IconStorage, IconContainer } from "./icons";
import KSpace from "./KSpace.vue";
import KDescRow from "./KDescRow.vue";
import KDescGroup from "./KDescGroup.vue";
type Prop = {
  volume: Volume;
  mounts?: VolumeMountStatus[];
};

const props = defineProps<Prop>();

const volumeType = computed(() => {
  if (props.volume.configMap) {
    return "配置字典";
  } else if (props.volume.secret) {
    return "密钥";
  } else if (props.volume.persistentVolumeClaim) {
    return "持久卷声明";
  } else if (props.volume.emptyDir) {
    return "空目录";
  } else if (props.volume.hostPath) {
    return "主机路径";
  } else {
    return "未知";
  }
});
</script>

<template>
  <div class="volume-wrapper">
    <KSpace gap="10px" class="w-full items-center" align="center">
      <el-icon size="24">
        <IconStorage />
      </el-icon>
      <KSpace direction="column" class="w-1/5">
        <span class="volume-content">{{ props.volume.name }}</span>
        <span class="volume-title">{{ volumeType }}</span>
      </KSpace>

      <KSpace v-if="volume.configMap" direction="column" class="w-1/5">
        <span class="volume-content">{{ props.volume.configMap.name }}</span>
        <span class="volume-title">配置字典</span>
      </KSpace>

      <KSpace v-if="volume.secret" direction="column" class="w-1/5">
        <span class="volume-content">{{ props.volume.secret.secretName }}</span>
        <span class="volume-title">密钥</span>
      </KSpace>

      <KSpace
        v-if="volume.persistentVolumeClaim"
        direction="column"
        class="w-1/5"
      >
        <span class="volume-content">
          {{ props.volume.persistentVolumeClaim.claimName }}
        </span>
        <span class="volume-title">持久卷声明</span>
      </KSpace>

      <KSpace v-if="volume.emptyDir" direction="column" class="w-1/5">
        <span class="volume-content">空目录</span>
        <span class="volume-title">空目录</span>
      </KSpace>

      <KSpace v-if="volume.hostPath" direction="column" class="w-1/5">
        <span class="volume-content">{{ props.volume.hostPath.path }}</span>
        <span class="volume-title">主机路径</span>
      </KSpace>
    </KSpace>

    <!-- Mount -->
    <KDescGroup fill>
      <KDescRow v-for="mount in mounts" :key="mount.name">
        <template #label>
          <KSpace align="center" gap="5px">
            <el-icon><IconContainer /></el-icon>
            <span>{{ mount.name }}</span>
          </KSpace>
        </template>
        <template #default>
          <KSpace align="center" gap="5px">
            <el-icon><IconContainer /></el-icon>
            <span>{{ mount.mountPath }}</span>
            <el-text size="small">
              {{ mount.readOnly ? "(只读)" : "(读写)" }}
            </el-text>
          </KSpace>
        </template>
      </KDescRow>
    </KDescGroup>
  </div>
</template>
<style lang="scss" scoped>
.volume-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  gap: 10px;
}

.volume-title {
  font-size: 12px;
  color: #666;
}

.volume-content {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
</style>
